<template>
    <div class="search-result">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            :error.sync="error"
            error-text="请求失败，点击重新加载"
        >
            <van-cell v-for="(item,index) in list" :key="index" :title="item.title" />
        </van-list>
    </div>
</template>

<script>
import { getSearchResult } from "@/api/search";
export default {
    name: "SearchResult",
    props:{
        searchText:{
            type:String,
            required:true
        }
    },
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            page:1,
            per_page:20,
            error:false
        };
    },
    methods: {
        async onLoad() {
            // 异步更新数据
            try {
                // 1、请求获取数据
                const { data } = await getSearchResult({
                    page:this.page,
                    per_page:this.per_page,
                    q:this.searchText
                })
                const { results } = data.data
                this.list.push(...results)
                // 2、将数据添加到数组列表中
                // 3、将本次加载中的 loading 关闭
                this.loading = false;
                // 4、判断是否还有数据
                if (results.length) {
                    //   如果有 更新下一页的页码
                    this.page++
                }else{
                    //   如果没有 将加载状态 finshed 设置结束
                    this.finished = true
                }
            } catch (error) {
                // 显示加载失败的提示状态
                this.error = true
                // 加载失败了 停止加载
                this.loading = false
            }
            
        },
    },
};
</script>

<style lang="less" scoped>
</style>